<template>
    <div class="iSay">
        <div class="lpMyWay">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <h4>{{ title }}</h4>
                </div>
                <div>
                    class="infinite-list" style="overflow:auto"
                    class="infinite-list-item"
                    <ul>
                        <li :v-for="i in data">
                            {{ i }}
                        </li>
                    </ul>
                </div>
                <div>
                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> hello world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>

                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> hello world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>

                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> hello world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>

                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> rdctfvygbuhinjmxdrctfvygbu
                    hinjmorxdctfvyuhijmelrdctfvygbuhinjmxrdctfvygbuhinjmxdrctfvygbuhinjmorxdctfvyuhijmolo world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>
                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> hello world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>

                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> hello world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>

                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> hello world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>

                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> rdctfvygbuhinjmxdrctfvygbu
                    hinjmorxdctfvyuhijmelrdctfvygbuhinjmxrdctfvygbuhinjmxdrctfvygbuhinjmorxdctfvyuhijmolo world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>
                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> hello world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>

                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> hello world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>

                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> hello world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>

                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> rdctfvygbuhinjmxdrctfvygbu
                    hinjmorxdctfvyuhijmelrdctfvygbuhinjmxrdctfvygbuhinjmxdrctfvygbuhinjmorxdctfvyuhijmolo world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>
                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> hello world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>

                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> hello world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>

                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> hello world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>

                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> rdctfvygbuhinjmxdrctfvygbu
                    hinjmorxdctfvyuhijmelrdctfvygbuhinjmxrdctfvygbuhinjmxdrctfvygbuhinjmorxdctfvyuhijmolo world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>
                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> hello world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>

                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> hello world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>

                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> hello world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>

                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> rdctfvygbuhinjmxdrctfvygbu
                    hinjmorxdctfvyuhijmelrdctfvygbuhinjmxrdctfvygbuhinjmxdrctfvygbuhinjmorxdctfvyuhijmolo world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> Knife4j 提供全局参数Debug功能,目前默认提供header(请求头)、query(form)两种方式的入参.在此添加全局参数后,默认Debug调试tab页会带上该参数,该全局参数只在该分组下有效,不同的分组需要分别设置 </span>
                        </div>
                    </div>
                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> Knife4j 提供全局参数Debug功能,目前默认提供header(请求头)、query(form)两种方式的入参.在此添加全局参数后,默认Debug调试tab页会带上该参数,该全局参数只在该分组下有效,不同的分组需要分别设置 </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>

                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> hello world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>

                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> hello world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>

                    <div class="receiver">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="right_triangle"></div>
                            <span> rdctfvygbuhinjmxdrctfvygbuhinjmorxdctfvyuhijmelrdctfvygbuhinjmxrdctfvygbuhinjmxdrctfvygbuhinjmorxdctfvyuhijmolo world </span>
                        </div>
                    </div>

                    <div class="sender">
                        <div>
                            <img src="http://127.0.0.1:8080/File/downloadFile/截屏2020-04-18 下午8.50.56.png">
                        </div>
                        <div>
                            <div class="left_triangle"></div>
                            <span> hello, man! </span>
                        </div>
                    </div>
                </div>

            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "iSay",
        data() {
            return {
                data: 100,

            }
        },

    }
</script>

<style scoped>
    .sender{
        clear:both;
    }
    .sender div:nth-of-type(1){
        float: left;
    }
    .sender div:nth-of-type(2){
        background-color: aquamarine;
        float: left;
        margin: 0 20px 10px 15px;
        padding: 10px 10px 10px 0px;
        border-radius:7px;
    }

    .receiver div:first-child img,
    .sender div:first-child img{
        width: 50px;
        height: 50px;
    }

    .receiver{
        clear:both;
    }
    .receiver div:nth-child(1){
        float: right;
    }
    .receiver div:nth-of-type(2){
        float:right;
        background-color: gold;
        margin: 0 10px 10px 20px;
        padding: 10px 0px 10px 10px;
        border-radius:7px;
    }

    .left_triangle{
        height:0px;
        width:0px;
        border-width:8px;
        border-style:solid;
        border-color:transparent aquamarine transparent transparent;
        position: relative;
        left:-16px;
        top:3px;
    }

    .right_triangle{
        height:0px;
        width:0px;
        border-width:8px;
        border-style:solid;
        border-color:transparent transparent transparent gold;
        position: relative;
        right:0px;
        top:3px;
    }
    .lpMyWay {
        width: 480px;
        margin: 0 auto;
        box-shadow:0 5px 20px #999;
        align-items: center;
        background-color: #ffffff;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }
    .lpMyWay {
        width: 480px;
        height: 80%;
        margin: 0 auto;
        align-items: center;
    }
</style>